//创建构造函数
//两个形参是元素的类名和事件类型
function Tabs(sel,type){
    //这里的this都是指向当前实例
    //获取传进去类名所对应的元素
    this.ele = document.querySelector(sel)
    //获取this.ele下面所要操作的元素
    this.btns = this.ele.querySelectorAll("ul>li")
    this.boxes = this.ele.querySelectorAll("ol>li")
    //将事件类型赋值给指向当前事件的事件类型
    this.type = type
    //当前实例的调用
    this.a()
}
//将方法写到显式原型里
Tabs.prototype.a=function(){
    //遍历按钮
    this.btns.forEach((item,index)=>{
        //对每一个按钮添加事件类型
        //这里的函数要用箭头函数，假如是function写法，函数里面的this就找不到指向了
        item.addEventListener(this.type,()=>{
            //对元素内所有类名进行清空
            for (let i = 0; i < this.btns.length; i++) {
                this.btns[i].className = ""
                this.boxes[i].className = ""
            }
            //在当前实例元素进行添加类名
            this.btns[index].className = "active"
            this.boxes[index].className = "active"
        })
    })
}